<template>
  <view class="screen">
    <view class="title">筛选</view>
    <view class="screenlist">
      <view class="titlelist">
        <uni-collapse accordion="true" style="z-index: 999;">
          <uni-collapse-item :title="select1" style="background:#fff" open>
            <view style="display:flex;justify-content: space-around;">
              <view
                class="SelectName"
                v-for="item in titlelist"
                :key="item.stationID"
                :class="{active:item.stationID==isActive}"
                @click="checktitle(item.stationID,item.stationName)"
              >{{ item.stationName }}</view>
            </view>
          </uni-collapse-item>
          <uni-collapse-item :title="select2" style="background:#fff">
            <scroll-view
              class="subSelectName scroll-Y"
              scroll-y="true"
            >
              <text
                class="monitoringPositionName"
				:class="{active:item.monitoringPositionID==IsActive}"
                v-for="item in subDate"
                :key="item.monitoringPositionID"
                @click="selectsubName(item.monitoringPositionName,item.monitoringPositionID)"
              >{{item.monitoringPositionName}}</text>
            </scroll-view>
          </uni-collapse-item>
        </uni-collapse>
        <view class="submit">
          <text class="submitBtn" style="color:#fff;background:#009FF1" @click="submitToInfo">确定</text>
          <text class="submitBtn" style="color:#fff;background:#BFBFBF" @click="todataquery">取消</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniCollapse from "@/components/uni-collapse/uni-collapse.vue";
import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue";
import uniIcons from "@/components/uni-icons/uni-icons";
import { ajax } from "../../../api/apis";
export default {
  data() {
    return {
      titlecode: "",
      titlelist: [],
      subDate: [],
      select1: "请选择寨子",
      select2: "请选择点位",
      stationID: "",
      monitoringPositionid: "",
	  isActive: "48",
	  IsActive:""
    };
  },
  components: {
    uniIcons,
    uniCollapse,
    uniCollapseItem
  },
  created() {},
  methods: {
    getStationName() {
      let _this = this;
      ajax({
        url:
          "/monitoringPosition/getMonitoringPositionByStationID?stationID=" +
          _this.isActive,
        method: "POST",
        success: res => {
          _this.subDate = res.data.data;
          console.log(res.data.data);
        }
      });
    },
    gettitlelist() {
      let _this = this;
      ajax({
        url: "/station/findList",
        method: "POST",
        data: {},
        success: res => {
          let date = res.data.data.filter(item => {
            return item.parentStationID == 0;
          });
          _this.titlelist = date;
        }
      });
    },
    submitToInfo() {
      let _this = this;
      console.log(_this.monitoringPositionid);
      uni.navigateTo({
        url:
          "../../index/dataquery/dataquery?monitoringPositionID=" +
          _this.monitoringPositionid
      });
    },
    checktitle(stationid,stationname) {
      console.log(stationid,stationname);
	  this.select1=stationname
	  this.isActive = stationid;
	  this.getStationName();
    },
    selectsubName(monitoringPositionName, monitoringPositionID) {
		this.IsActive=monitoringPositionID
      this.monitoringPositionid = monitoringPositionID;
      this.select2 = monitoringPositionName;
    },
    todataquery() {
      uni.navigateTo({
        url: "../dataquery/dataquery"
      });
    }
  },
  mounted() {
    let _this = this;
	_this.gettitlelist();
	this.getStationName();
  }
};
</script>

<style scoped>
uni-page-body {
  height: 100%;
}
.active {
  color: #009ff1;
  background-color: #ccecfc;
}
.screen {
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
.screenlist {
  flex: 1;
}
.title {
  font-size: 16px;
  padding: 15px;
  color: #fff;
  text-align: center;
  background: url("../../../static/image/navbg.png") no-repeat center;
}
.stationnamelist,
.substationnamelist {
  border: 1px solid #f0f0f0;
  border-radius: 5px;
  padding: 14px 0 13px 15px;
  width: 94%;
}
.SelectName {
  border-radius: 5px;
  font-size: 12px;
  padding: 7px 14px;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.subSelectName {
  border-radius: 5px;
  font-size: 12px;
  height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
text {
  margin: 5px 0;
}
.monitoringPositionName {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  margin: 5px 15px;
  /* background-color: #f9f9f9; */
  padding: 7px 14px;
}

.submit {
  display: flex;
  justify-content: space-around;
  margin-top: 50px;
}

.submitBtn {
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 12px 42px;
}
</style>